<template>
    <ul class="tabs">
        <li class="tabs-item">
            <router-link to="/movies">
                <i class="fa fa-file-movie-o fa-lg"></i>
                电影
            </router-link>
        </li>
        <li class="tabs-item">
            <router-link to="/homes">
                <i class="fa fa-home fa-lg"></i>
                影院
            </router-link>
        </li>
        <li class="tabs-item">
            <!--router-link 底层变成 a-->
            <router-link to="/news">
                <i class="fa fa-newspaper-o fa-lg"></i>
                咨询
            </router-link>
        </li>
        <li class="tabs-item">
            <router-link to="/my">
                <i class="fa fa-user fa-lg"></i>
                我的
            </router-link>
        </li>
    </ul>
</template>

<script>
    export default {
        name: "index"
    }
</script>

<style scoped lang="less">
    /* 引入less*/
    /* 编写主组件的样式*/
    /*点击导航的时候的高亮的类名*/
    .tabs-active {
        color: #ff5f16;
    }

    .tabs {
        position: fixed;
        left: 0;
        bottom: 0;
        /*z-index: 999;*/
        width: 100%;
        height: 50px;
        background-color: #fff;
        display: flex;
        /*主轴 交叉轴*/
        justify-content: space-around;
        align-items: center;

        .tabs-item {
            a {
                i {
                    padding-bottom: 5px;
                }

                display: flex;
                flex-direction: column;
                align-items: center;
            }
        }

    }
</style>